<template>
    <vue-simplebar>
        <div class="page-container">
            <el-row :gutter="12">
                <!--注册人数-->
                <el-col :span="6">
                    <chart-summary :params="summary.playerRegister"></chart-summary>
                </el-col>
                <!--游戏人数-->
                <el-col :span="6">
                    <chart-summary :params="summary.playerGame"></chart-summary>
                </el-col>
                <!--充值人数-->
                <el-col :span="6">
                    <chart-summary :params="summary.playerGameNew"></chart-summary>
                </el-col>
                <!--平台收益-->
                <el-col :span="6">
                    <chart-summary :params="summary.amount"></chart-summary>
                </el-col>
            </el-row>
            <!--实时状态-->
            <el-row>
                <chart-summary-monitoring></chart-summary-monitoring>
            </el-row>
            <!--在线状态-->
            <el-row>
                <chart-online></chart-online>
            </el-row>
            <!--平台收益-->
            <el-row>
                <chart-amount></chart-amount>
            </el-row>
            <!--手工订单-->
            <el-row>
                <chart-transfer></chart-transfer>
            </el-row>
            <!--钱包订单-->
            <el-row>
                <chart-wallet></chart-wallet>
            </el-row>
        </div>
    </vue-simplebar>
</template>

<script>
import ChartSummary from './Summary.vue'
import ChartSummaryMonitoring from './SummaryMonitoring.vue'
import ChartOnline from './Online.vue'
import ChartAmount from './Amount.vue'
import ChartTransfer from './Transfer.vue'
import ChartWallet from './Wallet.vue'

export default {
    components: {
        ChartSummary,
        ChartSummaryMonitoring,
        ChartOnline,
        ChartAmount,
        ChartTransfer,
        ChartWallet,
    },
    computed: {
        summary() {
            return {
                playerRegister: {
                    color: '#91c7ae',
                    name: this.$t('index.summary.player-register'),
                    uri: '/index/summary/playerRegister',
                    link: 'stats.user.player',
                },
                playerGame: {
                    color: '#91c7ae',
                    name: this.$t('index.summary.player-game'),
                    uri: '/index/summary/playerGame',
                    link: 'stats.user.player',
                },
                playerGameNew: {
                    color: '#d48265',
                    name: this.$t('index.summary.player-game-new'),
                    uri: '/index/summary/playerGameNew',
                    link: 'stats.user.player',
                },
                amount: {
                    color: '#d48265',
                    name: this.$t('index.summary.amount'),
                    uri: '/index/summary/amount',
                    link: 'platform.settlement',
                },
            };
        }
    }
}
</script>

<style lang="scss" scoped>
.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}
</style>
